<!DOCTYPE html>
<html>
<head>
	<title>PhotoSwipe</title>
	<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	
	<link href="styles.css" type="text/css" rel="stylesheet" />
	
	<link href="../assets/photoswipe.css" type="text/css" rel="stylesheet" />
	
	<!--
	<script src="http://192.168.0.98:8888/target/target-script-min.js#anonymous"></script>
	-->
	
	<script type="text/javascript" src="../lib/klass.min.js"></script>
	<script type="text/javascript" src="../lib/code.util-1.0.6/code.util-1.0.6.js"></script>
	
	<script type="text/javascript" src="../image.js"></script>
	<script type="text/javascript" src="../image.class.js"></script>
	<script type="text/javascript" src="../cache.js"></script>
	<script type="text/javascript" src="../cache.class.js"></script>
	<script type="text/javascript" src="../documentoverlay.js"></script>
	<script type="text/javascript" src="../documentoverlay.class.js"></script>
	<script type="text/javascript" src="../carousel.js"></script>
	<script type="text/javascript" src="../carousel.class.js"></script>
	<script type="text/javascript" src="../carousel.class.animation.js"></script>
	<script type="text/javascript" src="../toolbar.js"></script>
	<script type="text/javascript" src="../toolbar.class.js"></script>
	<script type="text/javascript" src="../uilayer.js"></script>
	<script type="text/javascript" src="../uilayer.class.js"></script>
	<script type="text/javascript" src="../zoompanrotate.js"></script>
	<script type="text/javascript" src="../zoompanrotate.class.js"></script>
	<script type="text/javascript" src="../photoswipe.js"></script>
	<script type="text/javascript" src="../photoswipe.class.js"></script>
	
	
	<script type="text/javascript">
		
		/* 
			Overview: 
			---------
			
			This is a debug version loading all int individual class files. 
			It will not run from the released "examples" folder. It needs to be run from
			"/src/examples/debug.html"
		
		*/
		
		// Here we are using the "Code.PhotoSwipe.Util.Events.domReady" function
		// to set the DOM ready event handler.
		// You could quite easily use $(document).ready() or document.addEventListener
		// as Code.PhotoSwipe.Util.Events.domReady is just a warpper for these
		
		(function(window, Util, PhotoSwipe){
			
			Util.Events.domReady(function(e){
				
				var 
					addEventListeners = false,
					instance;
				
				instance = PhotoSwipe.attach(Util.DOM.find('#Gallery a'), { 
				
					// General
					fadeInSpeed: 250,
					fadeOutSpeed: 250,
					preventHide: false,
					preventSlideshow: false,
					zIndex: 1000,
					backButtonHideEnabled: true,
					enableKeyboard: true,
					enableMouseWheel: true,
					invertMouseWheel: false,
					mouseWheelSpeed: 500,
					autoStartSlideshow: false,
					jQueryMobile: ( !Util.isNothing(window.jQuery) && !Util.isNothing(window.jQuery.mobile) ),
					jQueryMobileDialogHash: '&ui-state=dialog',
					enableUIWebViewRepositionTimeout: true,
					
					
					// Carousel
					loop: true,
					slideSpeed: 250,
					nextPreviousSlideSpeed: 0,
					enableDrag: true,
					swipeThreshold: 50,
					swipeTimeThreshold: 250,
					slideTimingFunction: 'ease-out',
					slideshowDelay: 3000,
					doubleTapSpeed: 250,
					margin: 20,
					imageScaleMethod: 'fit', // Either "fit", "fitNoUpscale" or "zoom",
					
					// Toolbar
					captionAndToolbarHide: false,
					captionAndToolbarFlipPosition: false,
					captionAndToolbarAlwaysVisible: true,
					captionAndToolbarAutoHideDelay: 5000,
					captionAndToolbarOpacity: 0.8,
					captionAndToolbarShowEmptyCaptions: true,
					getToolbar: PhotoSwipe.Toolbar.getToolbar,
					
					
					// ZoomPanRotate
					allowUserZoom: true, 
					allowRotationOnUserZoom: false,
					maxUserZoom: 5.0,
					minUserZoom: 0.5,
					doubleTapZoomLevel: 2.5,
					
					
					// Cache
					getImageSource: PhotoSwipe.Cache.Functions.getImageSource,
					getImageCaption: PhotoSwipe.Cache.Functions.getImageCaption,
					getImageMetaData: PhotoSwipe.Cache.Functions.getImageMetaData,
					cacheMode: PhotoSwipe.Cache.Mode.normal
				
				});
				
				
				if (addEventListeners){
					
					// onBeforeShow
					instance.addEventHandler(PhotoSwipe.EventTypes.onBeforeShow, function(e){
						console.log('onBeforeShow');
					});
					
					// onShow
					instance.addEventHandler(PhotoSwipe.EventTypes.onShow, function(e){
						console.log('onShow');
					});
					
					// onBeforeHide
					instance.addEventHandler(PhotoSwipe.EventTypes.onBeforeHide, function(e){
						console.log('onBeforeHide');
					});
					
					// onHide
					instance.addEventHandler(PhotoSwipe.EventTypes.onHide, function(e){
						console.log('onHide');
					});
					
					// onDisplayImage
					instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){
						console.log('onDisplayImage{');
						console.log('onDisplayImage - e.action = ' + e.action);
						console.log('onDisplayImage - e.index = ' + e.index);
						console.log(instance.getCurrentImage());
						console.log('onDisplayImage}');
					});
					
					// onResetPosition
					instance.addEventHandler(PhotoSwipe.EventTypes.onResetPosition, function(e){
						console.log('onResetPosition');
					});
					
					// onSlideshowStart
					instance.addEventHandler(PhotoSwipe.EventTypes.onSlideshowStart, function(e){
						console.log('onSlideshowStart');
					});
					
					// onSlideshowStop
					instance.addEventHandler(PhotoSwipe.EventTypes.onSlideshowStop, function(e){
						console.log('onSlideshowStop');
					});
					
					// onTouch
					instance.addEventHandler(PhotoSwipe.EventTypes.onTouch, function(e){
						console.log('onTouch{');
						console.log('onTouch - e.action = ' + e.action);
						console.log('onTouch - e.point = ');
						console.log(e.point);
						console.log('onTouch}');
					});
					
					// onBeforeCaptionAndToolbarShow
					instance.addEventHandler(PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarShow, function(e){
						console.log('onBeforeCaptionAndToolbarShow');
					});
					
					// onCaptionAndToolbarShow
					instance.addEventHandler(PhotoSwipe.EventTypes.onCaptionAndToolbarShow, function(e){
						console.log('onCaptionAndToolbarShow');
					});
					
					// onBeforeCaptionAndToolbarHide
					instance.addEventHandler(PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarHide, function(e){
						console.log('onBeforeCaptionAndToolbarHide');
					});
					
					// onCaptionAndToolbarHide
					instance.addEventHandler(PhotoSwipe.EventTypes.onCaptionAndToolbarHide, function(e){
						console.log('onCaptionAndToolbarHide');
					});
					
					// onToolbarTap
					instance.addEventHandler(PhotoSwipe.EventTypes.onToolbarTap, function(e){
						console.log('onToolbarTap');
						console.log(e);
					});
					
					// onBeforeZoomPanRotateShow
					instance.addEventHandler(PhotoSwipe.EventTypes.onBeforeZoomPanRotateShow, function(e){
						console.log('onBeforeZoomPanRotateShow');
					});
					
					// onZoomPanRotateShow
					instance.addEventHandler(PhotoSwipe.EventTypes.onZoomPanRotateShow, function(e){
						console.log('onZoomPanRotateShow');
					});
					
					// onBeforeZoomPanRotateHide
					instance.addEventHandler(PhotoSwipe.EventTypes.onBeforeZoomPanRotateHide, function(e){
						console.log('onBeforeZoomPanRotateHide');
					});
					
					// onZoomPanRotateHide
					instance.addEventHandler(PhotoSwipe.EventTypes.onZoomPanRotateHide, function(e){
						console.log('onZoomPanRotateHide');
					});
					
					// onZoomPanRotateTransform
					instance.addEventHandler(PhotoSwipe.EventTypes.onZoomPanRotateTransform, function(e){
						console.log('onZoomPanRotateTransform');
						console.log(e);
					});
					
				}
					
					
			});
			
			
		}(window, window.Code.Util, window.Code.PhotoSwipe));
		
	</script>
	
</head>
<body>

<div id="Header">
	<a href="http://www.codecomputerlove.com"><img src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove" /></a>
</div>

<div id="MainContent">

	<div class="page-content">
		<h1>PhotoSwipe</h1>
	</div>
	
	<ul id="Gallery" class="gallery">
		
		<li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" /></a></li>
		<li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" /></a></li>
		<li><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" /></a></li>
		<li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004" /></a></li>
		<li><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 005" /></a></li>
		<li><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 006" /></a></li>
		<li><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" alt="Image 007" /></a></li>
		<li><a href="images/full/008.jpg"><img src="images/thumb/008.jpg" alt="Image 008" /></a></li>
		<li><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" alt="Image 009" /></a></li>
		<li><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" alt="Image 010" /></a></li>
		<li><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" alt="Image 011" /></a></li>
		<li><a href="images/full/012.jpg"><img src="images/thumb/012.jpg" alt="Image 012" /></a></li>
		<li><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" alt="Image 013" /></a></li>
		<li><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" alt="Image 014" /></a></li>
		<li><a href="images/full/015.jpg"><img src="images/thumb/015.jpg" alt="Image 015" /></a></li>
		<li><a href="images/full/016.jpg"><img src="images/thumb/016.jpg" alt="Image 016" /></a></li>
		<li><a href="images/full/017.jpg"><img src="images/thumb/017.jpg" alt="Image 017" /></a></li>
		<li><a href="images/full/018.jpg"><img src="images/thumb/018.jpg" alt="Image 018" /></a></li>
		
	</ul>
	
</div>	

	
<div id="Footer">
	<p><small>&copy; 2011 Code Computerlove Ltd - new media agency / digital marketing agency</small></p>

	<div id="SocialLinks">
		<a href="http://blog.codecomputerlove.com/"><img src="images/blogicon.png" width="32" height="32" alt="Blog" /></a>
		<a href="http://www.twitter.com/computerlovers"><img src="images/twittericon.png" width="32" height="32" alt="Twitter" /></a>
		<a href="http://www.facebook.com/CodeComputerlove"><img src="images/facebookicon.png" width="32" height="32" alt="Facebook" /></a>
		<a href="http://www.flickr.com/photos/codecomputerlove"><img src="images/flickricon.png" width="32" height="32" alt="Flickr" /></a>
	</div>
	
</div>

</body>
</html>
